<template>
  <view class="team">
    <topTitle :title="$t('team.title')" />
    <view class="com">
      <view>
        <view>
          <view>{{ TeamStatisticsObj.total_income }}</view>
          <view>{{ $t('team.totalIncome') }}</view>
        </view>
        <view>
          <view>{{ TeamStatisticsObj.today_income }}</view>
          <view>{{ $t('team.todayIncome') }}</view>
        </view>
      </view>
      <view>
        <view>
          <view>{{ TeamStatisticsObj.total_people }}</view>
          <view>{{ $t('team.totalPeople') }}</view>
        </view>
        <view>
          <view>{{ TeamStatisticsObj.today_register }}</view>
          <view>{{ $t('team.todayRegister') }}</view>
        </view>
      </view>
    </view>
    <view class="tab">
      <view :class="{ active: type == 0 }" @click="tabFn(0)">{{ $t('team.tab.teamMember') }}</view>
      <view :class="{ active: type == 1 }" @click="tabFn(1)">{{ $t('team.tab.teamContribution') }}</view>
    </view>
    <view v-show="type == 0">
      <view class="grade">
        <view>{{ $t('team.todayNewRegister') }}{{ TeamStatisticsObj.today_register }}</view>
      </view>
      <view class="list" v-if="listData.length">
        <view>
          <view>{{ $t('team.account') }}</view>
          <view>{{ $t('team.grade') }}</view>
          <view>{{ $t('team.registrationTime') }}</view>
        </view>
        <view v-for="(item, idx) in listData" :key="idx">
          <view>{{ item.user_name }}</view>
          <view>{{ item.project_name }}</view>
          <view>{{ formattingTime(item.add_time) }}</view>
        </view>
      </view>
      <noData v-else  />
    </view>
    <view v-show="type == 1">
      <view class="grade">
        <view>{{ $t('team.todayEarnings') }}{{ TeamStatisticsObj.today_income }}</view>
      </view>
      <up-datetime-picker @confirm="confirm" @cancel="showTime = false"
        :toolbarTitle="timeType == 0 ? '开始时间' : '结束时间'" @close="showTime = false" :show="showTime" v-model="value1"
        mode="date" :closeOnClickOverlay="true"></up-datetime-picker>
      <view class="com">
        <view>
          <view>
            <view>${{ TeamStatisticsObj.total_recharge }}</view>
            <view>{{ $t('team.teamTotalRecharge') }}</view>
          </view>
          <view>
            <view>${{ TeamStatisticsObj.total_withdrawal }}</view>
            <view>{{ $t('team.teamTotalWithdrawal') }}</view>
          </view>
        </view>
      </view>
      <view class="list" v-if="listData.length">
        <view>
          <view>{{ $t('team.account') }}</view>
          <view>{{ $t('team.recordTime') }}</view>
          <view>{{ $t('team.income') }}</view>
        </view>
        <view v-for="(item, idx) in listData" :key="idx">
          <view>{{ item.trigger_user_name }}</view>
          <view>{{ formattingTime(item.add_time) }}</view>
          <view>{{ item.money }}</view>
        </view>
      </view>
      <noData v-else />
    </view>
    <up-popup :show="show" :round="25" mode="bottom" @close="show = false" @open="show = true" closeable>
      <view class="filter" @touchmove.stop>
        <view class="title">{{ $t('team.filter.title') }}</view>
        <view class="filterList">
          <view class="active">{{ $t('team.filter.level1') }}</view>
          <view>{{ $t('team.filter.level2') }}</view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";

const instance = getCurrentInstance()?.appContext.config.globalProperties;
import { TeamStatistics, TeamUser, TeamRebateOrder } from "@/api/UserApi";


const show = ref<boolean>(false);
const type = ref<number>(0);
const showTime = ref(false);
const value1 = ref(Date.now());
let startTime = ref<string>()
let endTime = ref<string>()
let timeType = ref<number>()



let TeamStatisticsObj = ref<any>({})


TeamStatistics().then((e) => {
	TeamStatisticsObj.value = e

})


let listData = ref<Array<any>>([]);
let select_time: any = null;
const initFn = async () => {
	let list: any = []
	let obj = {
		select_time
	}
	if (type.value === 0) {
		list = await TeamUser(obj)

	} else if (type.value === 1) {
		list = await TeamRebateOrder(obj)
	}
	if (!select_time) {
		listData.value = list;
	} else {
		listData.value = [...listData.value, ...list];
	}
};

initFn()
const tabFn = (index: number) => {
	type.value = index
	select_time = null
	listData.value = []
	initFn()
}

onReachBottom(() => {
	select_time = listData.value[listData.value.length - 1].add_time;
	initFn();
});
const confirm = (e: any) => {
	console.log(e)
	if (timeType.value === 0) {
		startTime.value = instance?.formattingTime(e.value, 1)

	} else {
		endTime.value = instance?.formattingTime(e.value, 1)
	}
	showTime.value = false
}
</script>
<style scoped lang="scss">
@import "../../static/scss/team.scss";
</style>